import React,{
    useEffect
} from 'react'
import {Form,Input,Button,Select } from 'antd'

const { Option } = Select;

const handleChange = (value) => {
  console.log(`selected ${value}`);
};

function My_modal({onFinishFailed,handleCancel,handleOk,modal_type}) {

  
    let [form] = Form.useForm()

    useEffect(() => {
        if(modal_type.key) {

            form.setFieldsValue({
              ...modal_type
        
            })  
       
        }
        else {
            form.setFieldsValue({
              name : '',
              city : '',
              age : ''
            })    
        }
    
    },[modal_type])

    
  const onFinish = (values) => {
    handleOk(Object.assign(modal_type,values))
  };
 
  return (
    <div>
         <Form
          form={form} 
          name="basic"
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 16,
          }}
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="Username"
            name="name"
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              },
            ]}
          >
            <Input />
          </Form.Item>


          <Form.Item
            label="Age"
            name="age"
     
            rules={[
              {
                type :  () => typeof Number("age"),
                required: true,
                message: 'Please input your username!',
              },
              {
                pattern : /^[1-9]\d{0,1}$/,
                message : '请输入年龄'
              }
            ]}
          >
            <Input />
          </Form.Item>


          <Form.Item
            label="City"
            name="city"
            rules={[
              {
                required: true,
                message: 'Please input your city!',
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="Type"
            name="type"
            rules={[
              {
                required: true,
                message: 'Please input your city!',
              },
            ]}
          >
            <Select defaultValue=""  
            style={{ width: 120 }} onChange={handleChange}>
              <Option value="正常营业">正常营业</Option>
              <Option value="门店关闭">门店关闭</Option>
              <Option value="暂停营业">暂停营业</Option>
            </Select>
          </Form.Item>

          <Form.Item
            wrapperCol={{
              offset: 8,
              span: 16,
            }}
          >
            <Button onClick={handleCancel}>取消</Button>

            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
    </div>
  )
}

export default My_modal